<template>
  <div :id="echartsName" style="width: 410px; height: 410px"></div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
      option: {
        series: {
          type: "sunburst",
          // emphasis: {
          //     focus: 'ancestor'
          // },
          data: [],
          radius: [0, "90%"],
          label: {
            rotate: "radial",
          },
        },
      },
    };
  },
  props: {
    echartsName: {
      type: String,
      default: function () {
        return "sunChart";
      },
    },
    sunChartData: Array,
  },
  methods: {
    // 创建chart
    createChart() {
      // 解决toolbar重置图表功能失效
      document.getElementById(`${this.echartsName}`)?.setAttribute('_echarts_instance_', '')
      if (!document.getElementById(`${this.echartsName}`)) return
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(
        document.getElementById(this.echartsName)
      );
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option);
    },
    initData() {
      // this.option.color = this.sunChartData.map(item => item.color)
      this.option.series.data = this.sunChartData;
    },
  },
  mounted() {
    this.initData();
    this.createChart();
  },
};
</script>

<style lang="stylus"></style>